<template>
  <div>
    <!--筛选查询-->
    <div class="box">
      <div class="title">筛选查询</div>
      <div class="cont">
        <span style="margin-left: 30px; color: #666666; font-size: 14px">所属分类：</span>

        <el-tree-select v-model="value" :data="data" check-strictly :render-after-expand="false" style="width: 180px"
          :props="defaultProps" />

        <el-button @click="init()"
          style="margin-left: 30px; color: #666666; font-size: 12px; width: 80px">查询结果</el-button>
      </div>
    </div>

    <!--企业列表-->
    <div class="box">
      <div class="title" style="margin-top: 30px">
        <span>数据列表</span>
        <el-button class="enterpriseBtn" style="width: 80px">删除</el-button>
        <el-button class="enterpriseBtn" style="width: 80px">新增</el-button>
      </div>

      <el-table :data="tableData" stripe border style="width: 100%; border: 1px solid #e0e0e0" :header-cell-style="{
          'text-align': 'center',
          'font-size': '16px',
          color: '#666666',
          borderColor: '#e0e0e0',
        }" :cell-style="{
          'text-align': 'center',
          'font-size': '14px',
          color: '#666666',
          borderColor: '#e0e0e0',
        }">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="code" label="编号" width="180" />
        <el-table-column prop="name" label="企业类别" width="190" />
        <el-table-column prop="parentName" label="上级类目" width="270" />
        <el-table-column prop="enterpriseNum" label="企业数量" width="270" />
        <el-table-column prop="createTime" label="添加日期" width="220" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <span class="btn">编辑</span>
            <span class="btn" @click="del(row.code)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { queryTree, queryList, deleteCategory } from "@/api/platform/enterpriseCategory.js";
import { ElMessage, ElMessageBox } from "element-plus";
defineOptions({
  // 作为一种规范最好必须写上并且和路由的name保持一致
  name: "category",
});

//属性区
const value = ref(); //查询条件的 id
const page = ref(0);
const pageSize = ref(0);
const data = ref(); //分类树
const tableData = ref();
//分类树属性
const defaultProps = {
  children: "children",
  label: "name",
  value: "id",
};

//方法区

//查询分类树
let tree = async () => {
  let res = await queryTree();
  console.log(res);
  if (res.code == 200) {
    data.value = res.data;
    data.value.unshift({ name: "全部分类", value: "0" });
  }
};

//查询分类列表
let init = async () => {
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    id: value.value,
  };

  let res = await queryList(data);
  if (res.code == 200) {
    tableData.value = res.data.list;
  }
};

//删除弹出框
let del = async (code) => {

  ElMessageBox.confirm("确认删除该分类吗?")
    .then(() => {
      remove(code);
    })
    .catch(() => {
      // catch error
    });
}

//删除请求
let remove = async (code) => {
  let res = await deleteCategory({ code })
  if (res.code == 200) {
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    init();
  }
}

onMounted(() => {
  tree();
  init();
});
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

.box {
  margin-right: 200px;
}

.title {
  border: 1px solid #e0e0e0;
  border-bottom: none;
  background-color: #f3f3f3;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  padding-left: 15px;
  color: #666666;
}

.cont {
  border: 1px solid #e0e0e0;
  background-color: #fff;
  height: 60px;
  line-height: 60px;
}

.btn {
  margin-left: 10px;
  font-size: 14px;
  color: #39f;
  cursor: pointer;
}

.enterpriseBtn {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}
</style>
